<style type="text/css">
    @media (orientation: landscape){
        .farmButton{
            width: 24%;
            height: 100px;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .box-wrap{
            width: 90% !important;
        }
    }
    @media (orientation: portrait){
        .farmButton{
            width: 48%;
            height: 100px;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
        }
    }
    .farmButton{
        padding: 5px;
        cursor: pointer;
    }
</style>
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            เลือกแปลงนา
        </div>
        <div class="panel-body">
            <?php
                $queryFM="
                    select  *
                    from    member_farm
                    where   memID='".$memID."'
                    ";
                $resultFM=$mysqli->query($queryFM);
                while($rowFM=$resultFM->fetch_array(MYSQLI_ASSOC)){
                    $farmClassTemp=new farm($rowFM["farmID"]);
                    ?>
            <div class="col-md-6" style="margin-bottom: 10px;">
                <button class="btn btn-default" style="font-size: 120%;width: 100%;" 
                     onclick="
                        window.open('?page=member/crop/cropList&farmID=<?=$rowFM["farmID"]?>','_self');
                    ">
                    <table class="noSpacing" style="width: 100%;height: 100%;">
                        <tr>
                            <td style="vertical-align: middle;text-align: center;">
                                <div style="font-size: 60%;font-weight: bold;"><?=$rowFM["farmName"]?></div>
                                <div style="font-size: 50%;">
                                    <?=$rowFM["area"];?> ไร่ &nbsp;&nbsp;
                                    <?=$farmClassTemp->getFarmShortAddress()?>
                                </div>
                            </td>
                        </tr>
                    </table>
                </button>
            </div>
                        <?php
                }
            ?>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(".hold").on("taphold",function(){
        alert(555);
    });   
</script>
<div id="registButton"
    onclick="
        //$('#addFarmDIV').show();
        window.open('.?page=member/farm/addFarmForm&memID=<?=$memID?>','_self');
    "
    style="
        position: fixed;
        background-color: #A1D1FF;
        border-radius: 100px;
        color: #fff;
        width: 70px;
        height: 70px;
        bottom: 40px;
        right: 10px;
        cursor: pointer;
        box-shadow: 1px 1px 3px #000;
        ">
    <table class="noSpacing" style="width:100%;height: 100%;">
        <tr>
            <td style="text-align: center;vertical-align: middle;font-size: 30px">
                <img src="img/add.png" height="40">
            </td>
        </tr>
    </table>
</div>
<div id="addFarmDIV" 
    style="
        display: none;
        position: fixed;
        top:0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        overflow: auto;
        ">
    <table class="noSpacing" style="width: 100%;height: 100%;">
        <tr>
            <td style="vertical-align: middle;height: 100%;">
                <div id="addFarmSubDIV" class="box-wrap" style="margin-left: auto;margin-right: auto;width: 500px;">
                    <div class="box-heading">
                        <h4>
                            <i class="icon-tag"></i> 
                            <span class="glyphicon glyphicon-plus"></span>
                            เพิ่มแปลง
                            <span class="glyphicon glyphicon-remove" style="float: right;cursor: pointer;" onclick="$('#addFarmDIV').hide()"></span>
                        </h4>
                    </div>
                    <div class="box-inner">
                        <form method="post" id="addFarmForm" class="form-horizontal" action="member/farm/addFarm.php">
                            <input type="hidden" name="memID" value="<?=$_GET["memID"]?>">
                            <input type="hidden" id="farmID" name="farmID">
                            <fieldset>

                                <!-- Text input-->
                                <div class="form-group">
                                  <label class="col-md-4 control-label" for="farmName">ชื่อแปลง</label>  
                                  <div class="col-md-4">
                                  <input id="farmName" name="farmName" type="text" placeholder="ชื่อแปลง" class="form-control input-md">

                                  </div>
                                </div>

                                <!-- Appended Input-->
                                <div class="form-group">
                                  <label class="col-md-4 control-label" for="area">พื้นที่</label>
                                  <div class="col-md-4">
                                    <div class="input-group">
                                      <input id="area" name="area" class="form-control" placeholder="พื้นที่" type="text">
                                      <span class="input-group-addon">ไร่</span>
                                    </div>
                                    <p class="help-block">เช่น 4 ไร่</p>
                                  </div>
                                </div>
                                <!-- Textarea -->
                                <div class="form-group">
                                  <label class="col-md-4 control-label" for="address">ที่อยู่</label>
                                  <div class="col-md-4">                     
                                      <textarea class="form-control" id="address" name="address" placeholder="บ้านเลขที่ ตรอก ซอย หมู่บ้าน"></textarea>
                                      <div id="addressDisplay"></div>
                                  </div>
                                </div>

                                <!-- Button -->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="addressBrowse"></label>
                                    <div class="col-md-4">
                                        <div id="addressBrowse" name="addressBrowse" class="btn btn-default"
                                            onclick="
                                                $('#addressBrowseDIV').toggle();
                                            "
                                            >เลือก ตำบล/อำเภอ/จังหวัด</div>
                                        <input type="hidden" id="subDistrictID" name="subDistrictID">
                                        <input type="hidden" id="subDistrictName" name="subDistrictName">
                                        <input type="hidden" id="districtID" name="districtID">
                                        <input type="hidden" id="districtName" name="districtName">
                                        <input type="hidden" id="provinceID" name="provinceID">
                                        <input type="hidden" id="provinceName" name="provinceName">
                                    </div>
                                </div>
                                
                                <div id="addressBrowseDIV" class="whiteShadow" style="height: 200px;width: 100%;border: 1px solid #aaa;padding: 5px;display: none;">
                                    <div class="form-group" style="width: 100%;margin-left: auto;margin-right: auto;">
                                        <div class="col-md-4" style="width: 100%;">
                                            <div class="input-group" style="width: 100%;">
                                                <span class="input-group-addon">คำค้น</span>
                                                <input id="keyword" class="form-control" placeholder="placeholder" type="text" style="width: 100%;">
                                                <span class="input-group-addon" style="cursor: pointer;"
                                                    onclick="showAddress($('#keyword').val())"
                                                    >ค้นหา</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="addressBrowseDisplay" style="height: 136px;overflow: auto"></div>
                                </div>
                                
                                <!-- Appended Input-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="cardID">พิกัดที่อยู่ของแปลง</label>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input id="geoLocation" name="geoLocation" class="form-control" placeholder="พิกัดที่อยู่" type="text">
                                            <span class="input-group-addon" onclick="getLocation()" style="cursor: pointer;">
                                                <span class="glyphicon glyphicon-screenshot"></span>
                                                พิกัดปัจจุบัน
                                            </span>
                                        </div>
                                        <p class="help-block">เช่น 18.629098892211914,98.876014709472656</p>
                                    </div>
                                </div>
                                
                                <div id="memberMap">
                                    <div id="map-canvas"></div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for=""></label>
                                    <div class="col-md-4">
                                        <input type='button' id="" name="" class="btn btn-primary" style="float: right;" value='บันทึก'
                                            onclick='formSubmit();'
                                            >
                                    </div>
                                </div>
                                
                            </fieldset>
                        </form>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    function showAddress(keyword){
        $('#addressBrowseDisplay').html('กรุณารอสักครู่');
        $.post('tools/addressBrowse.php',{
            keyword: keyword
        },function(data){
            $('#addressBrowseDisplay').html(data);
        });
    }
    function setAddress(subDistrictID,subDistrictName,districtID,districtName,provinceID,provinceName){
        $('#subDistrictID').val(subDistrictID);
        $('#subDistrictName').val(subDistrictName);
        
        $('#districtID').val(districtID);
        $('#districtName').val(districtName);
        
        $('#provinceID').val(provinceID);
        $('#provinceName').val(provinceName);
        
        $('#addressDisplay').html('ตำบล '+subDistrictName+' อำเภอ '+districtName+' '+provinceName);
        
        $('#addressBrowseDIV').hide();
    }
</script>

<?php
    if($_GET["farmID"]!=''){
        $farmID=$_GET["farmID"];
        $farmClass=new farm();
        $farmClass->setFarmID($farmID);
        $farm=$farmClass->getFarm();
        
        $addressClass=new address();
        $subDistrict=$addressClass->getSubDistrict($farm["subDistrictID"]);
        $district=$addressClass->getDistrict($farm["districtID"]);
        $province=$addressClass->getProvince($farm["provinceID"]);
        
        $geoLocation=  $farm["geoLocation"];
        
        ?>
<script type="text/javascript">
    $('#farmID').val('<?=$farmID?>');
    $('#farmName').val('<?=$farm["farmName"]?>');
    $('#area').val('<?=$farm["area"]?>');
    $('#subDistrictID').val('<?=$farm["subDistrictID"]?>');
    $('#districtID').val('<?=$farm["districtID"]?>');
    $('#provinceID').val('<?=$farm["provinceID"]?>');
    
    setAddress('<?=$subDistrict["subDistrictID"]?>','<?=$subDistrict["subDistrictName"]?>','<?=$district["districtID"]?>','<?=$district["districtName"]?>','<?=$province["provinceID"]?>','<?=$province["provinceName"]?>');
    
    $('#geoLocation').val("<?=$geoLocation?>");
    geoLocation="<?=$geoLocation?>";
    setMap();
    $('#map-canvas').show();
    $('#addFarmDIV').show();
</script>
            <?php
    }
?>